<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		/* 默认情况下，项目都排在一条线（又称"轴线"）上。
			flex-wrap属性定义，如果一条轴线排不下，如何换行。 */
		.contain {
			width: 50%;
			height: 1000px;
			background-color: #FFF0F5;
			display: flex;
			flex-wrap: wrap;
			/* nowrap（默认）：不换行。
				wrap：换行，第一行在上方。
				wrap-reverse：换行，第一行在下方。 */
		}

	</style>
</head>

<body>
	<div class="contain">
		<div style="background-color: #6495ED; width: 60px; height: 60px;" class="item">1</div>
		<div style="background-color: #ffaa7f; width: 60px; height: 60px;" class="item">2</div>
		<div style="background-color: #55aa00; width: 60px; height: 60px;" class="item">3</div>
		<div style="background-color: #aaaa00; width: 60px; height: 60px;" class="item">4</div>
		<div style="background-color: #ff00ff; width: 60px; height: 60px;" class="item">5</div>
		<div style="background-color: #0055ff; width: 60px; height: 60px;" class="item">6</div>
		<div style="background-color: #000000; width: 60px; height: 60px;" class="item">7</div>
		<div style="background-color: #ffff00; width: 60px; height: 60px;" class="item">8</div>
		<div style="background-color: #55ffff; width: 60px; height: 60px;" class="item">9</div>
		<div style="background-color: #ff5500; width: 60px; height: 60px;" class="item">10</div>
		<div style="background-color: #55557f; width: 60px; height: 60px;" class="item">11</div>
		<div style="background-color: #aaffff; width: 60px; height: 60px;" class="item">12</div>
	</div>
</body>

</html>